<template>
	<view class="container" :style="theme">
		<view class="head">
			<image v-if="cont.img_url && type!=2" class="banner" :src="cont.img_url" mode="widthFix"></image>
			<image v-if="type == 2" class="banner" :src="ossHost+'/member/20200412/hb1.png'" mode="widthFix"></image>
			<view class="head-cont">
				<view class="title">{{cont.name}}</view>
				<view class="tip flex-cb">
					<view><text>{{cont.price}}</text>积分</view>
					<view v-if="cont.stock">库存：{{cont.stock}}</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="bt">商品详情</view>
			<u-parse :content="cont.info"></u-parse>
		</view>
		<view class="bottomState flex-cb">
			<view class="jifen">我的积分：<text>{{cont.integral || 0}}</text></view>
			<view>
				<view class="registerNow" @click="dhBtn">立即兑换</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				noClick: true,
				id: '',
				type: '',
				cont: {}
			}
		},
		onLoad(ops) {
			this.id = ops.id
			this.type = ops.type
			this.getDetail()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			dhBtn() {
			    if(this.cont.stock && this.cont.stock < 1) {
				  this.$app.showToast('当前商品库存不足')
			      return false
			    }
			    if(this.cont.price > this.cont.integral) {
				  this.$app.showToast('当前积分不足')
			      return false
			    }
				this.$app.ajax({
					api: this.$api.goodsRedeem(),
					data: {
						param: {
							memberId: this.userInfo.id,
							goodsId: this.id,
							venueId: this.venueId
						}
					},
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.$app.showToast('兑换成功')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 2000)
					}
				}).catch(() => {})
			  },
			getDetail() {
				this.$app.ajax({
					api: this.$api.goodsInfo(),
					data: {
						param: {
							memberId: this.userInfo.id,
							id: this.id
						}
					},
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.cont = res.record
						this.cont.info = res.record.info?res.record.info.replace(/\<img/g,'<img style="vertical-align: top;"'):''
					} else {
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					}
				}).catch(() => {})
			}

		}

	}
</script>
<style scoped lang="scss">
.container {
  padding-bottom: 80rpx;
}

.head {
  background-color: #ffff;
  margin-bottom: 24rpx;
}

.banner {
  width: 100%;
  height: 400rpx;
  overflow: hidden;
}

.swiper-item {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-items {
  height: 100%;
  font-weight: 400;
  font-size: 27rpx;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.swiper-item image {
  width: 100%;
}

.head-cont {
  padding: 30rpx;
}

.head-cont .title {
  font-size: 34rpx;
  font-weight: 500;
  color: #222222;
  margin-bottom: 20rpx;
  line-height: 44rpx;
}
.tip{
  color: #555555;
  line-height: 50rpx;
  font-size: 24rpx;
}
.tip text{
  font-size: 40rpx;
  margin-right: 10rpx;
  font-weight: bolder;
  color: $red;
}
.info {
  font-size: 24rpx;
  font-weight: 400;
  color: #555555;
  margin-bottom: 20rpx;
  line-height: 36rpx;
}

.card {
  background-color: #ffff;
  padding: 30rpx;
  margin-bottom: 24rpx;
  .bt {
    color: #222222;
    line-height: 1.5;
    font-size: 32rpx;
    font-weight: 500;
    margin-bottom: 30rpx;
  }
}

.bottomState {
  width: 100%;
  padding: 16rpx 30rpx;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.bottomState .jifen {
  color: #222222;
  font-size: 28rpx;
}

.bottomState .jifen text {
  font-size: 32rpx;
  font-weight: bolder;
  color: $red;
}

.registerNow {
  height: 68rpx;
  padding: 0 34rpx;
  color: #fff;
  background-color: $color;
  font-size: 28rpx;
  border-radius: 36rpx;
  line-height: 68rpx;
  margin-left: 20rpx;
}

</style>
